- 综合排序
- 最热优先
- 最新优先
HTML 5 Canvas vs. SVG
可扩展性Canvas可扩展性：由于是基于像素绘制，图形放大或缩小时会出现失真，无法像 SVG 那样保持清晰。适用场景：适合图像处理、游戏、动态效果等，尤其是对质量要求不高或不需要无损缩放的场景。 canvas.addEventListener("click", function(event) { // 处理点击事件});php66 Bytes© 菜鸟-创作你的创作SVG交互性：由于每个 SVG SVG样式和动画：可以直接使用 CSS 控制 SVG 元素的样式和动画，也可以通过 JavaScript 操作。 SVG文件大小：SVG 文件通常比 Canvas 更小，尤其是用于图标或简单图形时，因为它是基于矢量的，图形细节通过标记描述。9. 适用场景总结Canvas 适用场景游戏开发：需要频繁更新图形的场景。 选择使用 Canvas 还是 SVG 取决于你的应用需求：是否需要频繁更新图形，图形的复杂性，是否需要支持交互和可访问性等。https://www.52runoob.com/archives/5093
35810编辑于 2025-08-01- 来自专栏Leaflet
在Leaflet中点对象使用SVG和Canvas两种模式的对比
基于以上的原因，有必要对Leaflet中采用SVG和Canvas两种模式进行渲染的原理和效果做一个基础的对比。 本文即在此需求背景下产生，本文首先阐述Leaflet中SVG和Canvas两种模式的原理和Leaflet的相关架构，然后通过实例对比marker的不同规模生成对机器的资源占用，最后使用基于Canvas的技术实现了 一、关于SVG和Canvas 既然要对比SVG和Canvas这两种模式，就有必要对这两种模式进行一个简单的介绍。 因此对兼容性的要求比较高，从第一节的相关知识中可以了解到，SVG的通用性和兼容相对而言是比较好，因此其默认采用的也是基于SVG的渲染方式，这里可以从官网中可以看到：三、SVG和Canvas实例及性能对比 本节将重点采用实例的方式对SVG和Canvas这两种模式进行代码级讲解，同时采用不同规模的数据进行测试和验证，在通一台机器上测试不通渲染方式，不同的数据规模下，两者的性能对比。
11610编辑于 2026-06-19 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。 svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。 canvas 适合开发游戏，svg 不适合游戏应用。
4.1K30发布于 2021-10-01 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。 svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。 canvas 适合开发游戏，svg 不适合游戏应用。
2K20编辑于 2021-11-30 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。 svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。 canvas 适合开发游戏，svg 不适合游戏应用。
2K50发布于 2021-09-30 - 来自专栏acoolgiser_zhuanlan
canvas 和 SVG 以及 VML 之间的差异
canvas 和 SVG 以及 VML 之间的差异： <canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。 要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。 学习canvas： http://www.w3school.com.cn/tags/html_ref_canvas.asp https://blog.csdn.net/u012468376/article /details/73350998 学习VML：https://blog.csdn.net/yinxianluo/article/details/45334837 学习svg：http://www.runoob.com /svg/svg-tutorial.html
3.2K10发布于 2019-01-17 - 来自专栏腾讯社交用户体验设计
为什么要用SVG？- svg与iconfont、图片多维度对比
SVG发展历程 2001年9月4日，发布SVG 1.0 2003年1月4日，发布SVG 1.1 2003年1月14日，推出SVG移动子版本：SVG Tiny和SVG Basic 2008年12月22日， ，具体用法如下代码设置title与desc标签即可： 与icon font对比 1.渲染方式不同 icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的 ，SVG上面我说过它是图形所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题，请看下图对比： 详细的原因可查看我之前写的这篇文章《高清ICON SVG解决方案(上)》 2.icon font只能支持单色 ，测试内容分别对demo页面491图标的 __Loading、Rendering、Painting__ 这三个指标做了测试 1.svg与ion font性能对比 1、结果svg整体是的 Rendering 2.svg sprites与png sprites性能对比 这个测试通过将svg sprites生成对应的1倍图png sprites来进行测试，图标在页面的实际大小是相等的。
6.2K61发布于 2018-06-29 - 来自专栏HT
绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让 Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。 以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image 提到Canvas和SVG的融合，我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例，整个手机电池的静态部分我们通过加载一个简单的SVG素材实现，而充电动态变化的部分，我们采用一个渐进色的 绘制到Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到
6.3K80发布于 2018-01-03 - 来自专栏计算机图形学 前端可视化 WebGL
FireFox下Canvas使用图像合成绘制SVG的Bug
本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。 最近产品上需要做一个这样的功能：给一些图形进行染色处理。 结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。 如果是，则先把svg图片绘制到临时的canvas上面。 后续绘制用临时的canvas替代svg图片。 = document.createElement('canvas'); tempCanvas.width = svg.width; / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener
1.7K10发布于 2019-07-12 - 来自专栏软件开发
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。 SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。、 浏览器支持情况如下： ? svg是一个新增加标签，xmlns是命名空间，version是svg的版本，circle标签就是对svg要展示的图像进行描述，cx与cy表示位置，r表示半径，stroke是描边样式，stroke-width 3.2、多种引入SVG的方法 SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。 SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件 引入方式如下： <!
11.7K100发布于 2018-01-04 - 来自专栏hightopo
绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让 Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。 以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image 提到Canvas和SVG的融合，我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例，整个手机电池的静态部分我们通过加载一个简单的SVG素材实现，而充电动态变化的部分，我们采用一个渐进色的 绘制到Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到
2.4K30发布于 2018-07-09 - 来自专栏计算机图形学 前端可视化 WebGL
FireFox下Canvas使用图像合成绘制SVG的Bug
结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。 - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener 如果是，则先把svg图片绘制到临时的canvas上面。 后续绘制用临时的canvas替代svg图片。 svg.onload = function(){ tempCanvas = document.createElement('canvas / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener
1.9K00发布于 2019-07-10 - 来自专栏拂晓风起
HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame 2、css3 3、svg 4、canvas（当然，这个还是要配合js） 也许这么分类是不对的 ，因为无论如何都需要脚本控制，那么也许应该分为 1、js+传统css 2、css3 3、js+svg 4、js+canvas 但由于requestAnimationFrame比较特殊，所以还是单独出来说吧 4、canvas 依赖js（参考1），修改canvas的效果，简单的效果可以直接利用canvas.getContext("2d")画出来；复杂的效果，可以配合Image实现。 可以发现，CSS3和canvas是清一色都被支持到了，而SVG在Android低版本（2.X）浏览器是不支持的。 6、总结 如果做游戏，肯定是清一色canvas+开源的框架，但是普通的简单网页效果，例如图表，就应该根据实际的情况灵活运用各种方式了。而SVG相对而言，可能是较方便实现图表的方式。
4.8K10发布于 2018-07-24 - 来自专栏大前端（横向跨端 & 纵向全栈）
前端面试 【HTML】— Svg 和Canvas有什么区别？
主要有以下区别： 1. canvas是H5时期才有绘图方法，而svg已经有了十多年的历史； 2. canvas绘图是基于像素点，是位图，如果进行放大或缩小会失真；svg基于图形，用html标签描绘形状， 放大缩小不会失真； 3. canvas需要在js中绘制，svg在html绘制； 4. canvas支持颜色比svg多； 5. canvas无法对已经绘制的图像进行修改、操作，svg可以获取到标签进行操作
1.3K20发布于 2021-11-10 - 来自专栏葡萄城控件技术团队
三天学会HTML5——SVG和Canvas的使用
第2天将学习如何使用Canvas 和使用SVG 实现功能 Lab1—— 使用Canvas Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS Lab 2 使用SVG 工作 如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。 初始化 1. SVG VS Canvas SVG 和Canvas 区别： Vector VS Pixel Canvas 是基于Pixel 而SVG 是基于Vector ? ? 简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。 XML VS JavaScript SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。 支持事件处理 Canvas 不支持事件处理，SVG 支持。
3.3K90发布于 2018-01-10 - 来自专栏JowayYoung谈前端
浅谈两种前端截图方式：Canvas截图 vs SVG截图
Canvas截图：html2canvas SVG截图：rasterizehtml 原理 首先来谈下两种前端截图方式的原理，虽然实现方式不太一致，但是核心思想是相同的。 以rasterizehtml为代表的SVG截图，通过遍历DOM克隆一份副本，利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中，将此SVG在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上 转换过程可理解成：DOM→SVG的ForeignObject→Canvas→Image。 两种前端截图方式最后都是通过把DOM绘制到Canvas，再通过Canvas输出图片。 Canvas截图的限制性 无法渲染跨域资源(支持同域) 无法渲染iFrame和Flash内容(支持SVG) SVG截图的限制性 无法渲染跨域资源(支持同域) 无法渲染如lazyload等通过JS加载的资源 const base64 = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(res.svg))); Render
15.3K50发布于 2020-04-01 - 来自专栏前端重点笔记
三种图表技术SVG、Canvas、WebGL 3D比较
说白了就是基于Canvas的3D框架 主要用来做 3D 展示、动画、游戏。 因为前两项都是描述2D图形的，而WebGL是描述3d的，所以以下针对SVG和Canvas做比较。 3.有了Canvas为什么还要使用SVG 最重要的一点是SVG不依赖于终端设备的像素，可以随意放大缩小但是不会失真 继续：为什么SVG放大不会失真而Canvas却会变模糊呢？ 另外Canvas渲染出来的图叫位图,SVG渲染出来的图叫矢量图 ? 看到这里你肯定会觉得那直接所有图形都用SVG画不就行了，位图就可以直接淘汰了呀，但是SVG画的图也有缺点，以下针对两者的不同做一个对比。 4.两者的对比 ? 5.总结 Canvas和SVG两者的适用场景不同，开发者在使用是应根据具体的项目需求来选择相应的渲染方式。 最后附上一个SVG编译器帮大家更好的理解和使用SVG <!
4.3K30发布于 2019-09-16 - 来自专栏Super 前端
从SVG到Canvas：选择最适合你的Web图形技术
SVG 和 Canvas 都是可以在 Web 浏览器中绘制图形的技术。 众所周知， icon 通常使用 svg（如 iconfont），而交互式游戏采用 Canvas。二者具体的区别是什么？ 绘制的图形不同：Svg 绘制矢量图（不依赖分辨率），Canvas 绘制位图（依赖分辨率）； 事件处理不同：Svg 基于 XML，对 DOM、事件友好，Canvas 通过 javascript 绘制，内部元素添加事件比较复杂 <canvas id="myCanvas" width="100" height="100"></canvas> <script> var canvas = document.getElementById > canvas 像画布 具有大量复杂细节和渐变的高度交互性工作是 Canvas 的领域。 且 Canvas 有不错的性能保障。由于这个原因，使用 Canvas 构建的游戏比使用 Svg 构建的游戏多得多。
2K30编辑于 2023-08-24 - 来自专栏wujunmin
Power BI SVG、HTML、Deneb圆角条形图对比
这是在Power BI 使用三种不同的技术手段实现的圆角条形图： 首先是SVG，图表度量值如下： 条形图.SVG = "data:image/svg+xml;utf8,<svg xmlns='http ://www.w3.org/2000/svg' id='wujunmin' width='300' height='30' > <path d='M10 15L" & 290 * [销售业绩] <text x='298' y= '22' font-size='18' text-anchor='end'>" & FORMAT ( [销售业绩], "#,#" ) & "</text> </svg
49510编辑于 2025-05-04 - 来自专栏各类技术文章~
Canvas和SVG是什么？有什么区别？哪个性能好
介绍 Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术 1.什么是 Canvas <canvas>是H5新增的组件，就像一块幕布，可以使用脚本（通常为Javascript） Canvas 技术比较新，注重栅格图像处理。 2.什么是SVG？ SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年， 基于可扩展标记语言XML 出来的 区别： Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案 Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。 SVG是通过DOM操作来显示的。 功能对比： Canvas 提供功能更原始，动态渲染和大数据量绘制 1.依赖分辨率 2.不支持事件处理器 3.Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注，所以文本渲染能力弱
1.7K00发布于 2021-09-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号